<template>
  <van-nav-bar
        title="登录注册"
        left-text="返回"
        left-arrow
        :right-text="rightText"
        @click-left="onClickLeft"
        class="custom-nav-bar"
      />
  <div class="login-register-page">
    <div class="tabs">
      <van-cell title="登录" @click="showLoginForm = true" :active="showLoginForm" />
      <van-cell title="注册" @click="showLoginForm = false" :active="!showLoginForm" />
    </div>
    <div class="form-container">
      <form @submit.prevent="handleSubmit">
        <!-- 登录表单 -->
        <div v-show="showLoginForm">
          <van-field
            v-model="loginForm.username"
            placeholder="用户名"
            rules="[{ required: true, message: '请输入用户名' }]"
          />
          <van-field
            type="password"
            v-model="loginForm.password"
            placeholder="密码"
            rules="[{ required: true, message: '请输入密码' }]"
          />
        </div>
        <!-- 注册表单 -->
        <div v-show="!showLoginForm">
          <van-field
            v-model="registerForm.username"
            placeholder="用户名"
            rules="[{ required: true, message: '请输入用户名' }]"
          />
          <van-field
            type="password"
            v-model="registerForm.password"
            placeholder="密码"
            rules="[{ required: true, message: '请输入密码' }]"
          />
          <van-field
            type="password"
            v-model="registerForm.confirmPassword"
            placeholder="确认密码"
            rules="[
              { required: true, message: '请确认密码' },
              { validator: validateConfirmPassword, trigger: 'onBlur' }
            ]"
          />
        </div>
        <div class="form-buttons">
          <van-button type="primary" native-type="submit">{{ showLoginForm ? '登录' : '注册' }}</van-button>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup>
  import { ref } from 'vue';
  import { useRouter } from 'vue-router';
  import { Toast } from 'vant';
  
  const router = useRouter();
  
  const showLoginForm = ref(true); // 默认显示登录表单
  
  const loginForm = ref({
    username: '',
    password: ''
  });
  
  const registerForm = ref({
    username: '',
    password: '',
    confirmPassword: ''
  });
  
  // 验证确认密码是否与密码匹配
  const validateConfirmPassword = (rule, value, callback) => {
    if (value !== registerForm.value.password) {
      callback('两次输入密码不一致');
    } else {
      callback();
    }
  };
  
  const handleSubmit = () => {
    if (showLoginForm.value) { // 使用 .value 来获取 showLoginForm 的当前值
      // 处理登录逻辑
      console.log('登录', loginForm.value);
      Toast.success('登录成功'); // 仅为示例，实际应根据API响应处理
      // 示例：如果登录成功，router.push('/');
    } else {
      // 处理注册逻辑
      console.log('注册', registerForm.value);
      Toast.success('注册成功'); // 仅为示例，实际应根据API响应处理
      // 示例：如果注册成功，可能需要重置表单并显示成功消息或跳转到登录页面
      // 如果需要，也可以在这里添加额外的验证逻辑，例如检查用户名是否已存在
    }
  };

  // 点击返回按钮的处理函数
  const onClickLeft = () => {
    router.back(); // 返回到上一个页面
  };
</script>
<style scoped>
.login-register-page {
    padding: 20px;
}
.tabs {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}
.form-container {
    max-width: 400px;
    margin: 0 auto;
}
.form-container > div {
  margin-bottom: 20px; /* 为每个表单块添加底部间距 */
}
.van-field {
  margin-bottom: 10px; /* 为每个字段添加底部间距 */
}
.form-buttons {
    margin-top: 30px; /* 增加按钮区域的顶部间距 */
    text-align: center;
}
</style>